<template>
  <div class="product-set">
    <h1 class="title">历史导入进度，共{{total}}条</h1>
    <el-table :data="list" border>
      <el-table-column prop="fileName" label="表格名称"></el-table-column>
      <el-table-column prop="createTime" label="导入时间"></el-table-column>
      <el-table-column label="导入状态">
        <template slot-scope="scope">
          <span v-html="getStateResult(scope.row.importStatus)"></span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="操作">
        <template slot-scope="scope">
          <a href="javascript:void(0)" @click="toDetail(scope.row)" v-show="scope.row.importStatus!=0">查看详情</a>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination align="right" background
                   class="pagination fixed active"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="current"
                   :page-size="size"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
  </div>
</template>

<script>
    import {recordList} from '@/api/product/import'
    import {mapState} from 'vuex'

    export default {
        name: "set",
        data() {
            return {
                total: 0,
                current: 1,
                size: 10,
                list: []
            }
        },
        computed: {
            ...mapState(['common'])
        },
        mounted() {
            this.current = this.common.commonPage;
            this.size = this.common.commonPageSize;
            this.getList()
        },
        methods: {
            getList() {
                const params = {
                    current: this.current,
                    size: this.size
                }
                recordList(params).then(res => {
                    if (res.data.success) {
                        const result = res.data.data;
                        this.list = result.records;
                        this.total = result.total;
                    }
                })
            },
            toDetail(row) {
                this.$store.commit('SET_COMMONPAGE', {page: this.current, pageSize: this.size});
                this.$router.push({
                    path: `/product/set/detail/${row.id}`,
                    query: {
                        info: row.importResult
                    }
                })
            },
            handleCurrentChange(page) {
                this.current = page;
                this.getList();
            },
            handleSizeChange(val) {
                this.size = val;
                this.handleCurrentChange(1)
            },
            getStateResult(state) {
                switch (state) {
                    case 0:
                        return '<span style="color: #87CE9F">导入成功</span>';
                    case 1:
                        return '<span style="color: #DF3736">导入失败</span>';
                    case 2:
                        return '<span style="color: #2A97F9">部分完成</span>';
                    default:
                        return ''
                }
            }
        }
    }
</script>

<style scoped lang="scss">
  $activeColor: #2A97F9;
  .product-set {
    .set-top {
      display: flex;
      border-bottom: 1px solid #F3F3F3;
      position: relative;

      li {
        padding: 0 0 10px 30px;
        color: #8C8C8C;
      }

      li.active {
        color: $activeColor;
      }

      .line {
        position: absolute;
        left: 17px;
        bottom: -2px;
        width: 90px;
        height: 4px;
        background: $activeColor;
        border-radius: 2px;
      }
    }

    .title {
      color: #232323;
      font-size: 16px;
      margin-top: 20px;
      margin-bottom: 15px;
    }

    .el-table {
      border-radius: 10px;

      a {
        color: $activeColor;
        border-bottom: 1px solid $activeColor;
      }
    }
  }
</style>
